import { defineComponent, h, Transition } from 'vue'

const transitionStyle = '0.3s height ease-in-out'

const transitionHooks = {
  name: 'collapse',
  onBeforeEnter(el: any) {
    const e = el as HTMLElement
    e.style.transition = transitionStyle
    e.style.height = '0'
    e.style.overflow = 'hidden'
  },
  onEnter(el: any) {
    const e = el as HTMLElement
    void e.offsetHeight
    e.style.height = `${e.scrollHeight}px`
  },
  onAfterEnter(el: any) {
    const e = el as HTMLElement
    e.style.transition = ''
    e.style.height = ''
    e.style.overflow = ''
  },
  onBeforeLeave(el: any) {
    const e = el as HTMLElement
    e.style.height = `${e.scrollHeight}px`
    e.style.overflow = 'hidden'
    void e.offsetHeight
  },
  onLeave(el: any) {
    const e = el as HTMLElement
    e.style.transition = transitionStyle
    e.style.height = '0'
  },
  onAfterLeave(el: any) {
    const e = el as HTMLElement
    e.style.transition = ''
    e.style.height = ''
    e.style.overflow = ''
  }
}
const CollapseTransition = defineComponent({
  name: 'CollapseTransition',
  setup(_, { slots }) {
    return () => h(Transition, { ...transitionHooks }, slots.default?.())
  }
})

export default CollapseTransition
